<template>
  <div class="codelover">
    <router-link to="/" class="home-link">首页</router-link>
    <router-link to="/profile" class="home-link">个人简介</router-link>
    <router-link to="/codelover" class="home-link">课程选择</router-link>
    <van-nav-bar title="333个人成绩" />

    <form action="/" @submit.prevent="filterTasksBySearch">
      <van-search v-model="searchQuery" show-action placeholder="请输入搜索关键词" />
    </form>
    <!-- 课程下拉菜单 -->
    <van-dropdown-menu>
      <template #title>
        <van-cell title="全部课程" is-link />
      </template>
      <van-dropdown-item v-model="value1" :options="option1" />
    </van-dropdown-menu>
    <div v-for="(item, index) in filterTasks" :key="index" class="task-item">
      <div class="task-info">
        <div class="task-name">{{ item.task }}</div>
        <div class="task-date">截止时间: {{ formatDate(item.dueDate) }}</div>
      </div>
      <div class="task-comp">
        <van-tag plain type="danger">完成情况：{{ item.comp}}</van-tag>
      </div>
      <div class="task-status">
        <van-tag plain type="danger">评分：{{ item.status }}</van-tag>
      </div>
      <div class="task-weight">评语: {{ item.weight }}</div>
      <van-button @click="handleVisitLink(item.link)">访问链接</van-button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from "vue";
import {
  NavBar,
  Search,
  Cell,
  DropdownMenu,
  DropdownItem,
  Tag,
  Button,
} from "vant";

export default {
  components: {
    [NavBar.name]: NavBar,
    [Search.name]: Search,
    [Cell.name]: Cell,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Tag.name]: Tag,
    [Button.name]: Button,
  },
  setup() {
    const searchQuery = ref("");
    const value1 = ref("");
    const value2 = ref("");
    const option1 = [
      { text: "全部任务", value: "" },
      { text: "Vue3开发初体验", value: "Vue3开发初体验" },
      { text: "vue3路由", value: "vue3路由" },
      { text: "开源组件", value: "开源组件" },
      { text: "common-list开源组件", value: "common-list开源组件" },
      { text: "期末作业考核", value: "期末作业考核" },
    ];
    const formatDate = (dateString) => {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Date(dateString).toLocaleDateString(undefined, options);
    };
    
    // 根据搜索查询、课程和班级筛选任务
    const filterTasks = computed(() => {
      return tasks.value.filter(item => {
        // 检查任务是否符合课程和班级筛选条件
        const matchCourse = !value1.value || item.task === value1.value;
        const matchClass = !value2.value || item.class === value2.value;
        // 检查任务是否符合搜索查询
        const matchSearch = searchQuery.value
          ? item.task.toLowerCase().includes(searchQuery.value.toLowerCase())
          : true;
        return matchCourse && matchClass && matchSearch;
      });
    });

    // 定义一个方法来处理搜索事件
    const filterTasksBySearch = () => {
    };
    const tasks = ref([
      {
        task: "Vue3开发初体验",
        dueDate: "2024-06-20T23:59:59", 
        comp:"已完成",
        status: "85",
        weight: "功能齐全，样式优美",
        link: "http://example.com",
      },
      {
        task: "vue3路由",
        dueDate: "2024-06-20T23:59:59", 
        comp:"已完成",
        status: "95",
        weight: "功能齐全，样式优美",
        link: "http://example.com",
      },
      {
        task: "开源组件",
        dueDate: "2024-06-20T23:59:59", 
        comp:"已完成",
        status: "85",
        weight: "功能齐全，样式优美",
        link: "http://example.com",
      },
      {
        task: "common-list开源组件",
        dueDate: "2024-06-20T23:59:59", 
        comp:"已完成",
        status: "85",
        weight: "功能齐全，样式优美",
        link: "http://example.com",
      },
      {
        task: "期末作业考核",
        dueDate: "2024-06-20T23:59:59", 
        comp:"已完成",
        status: "65",
        weight: "功能不齐全",
        link: "http://example.com",
      },

    ]);
    const handleVisitLink = (link) => {
      alert("没有访问的权限！");
    };

    // const filterTasks = computed(() => {
    //   if (value1.value && value2.value) {
    //     // 如果同时选择了课程和班级，则需同时满足条件
    //     return tasks.value.filter(
    //       (item) => item.task === value1.value && item.class === value2.value
    //     );
    //   } else if (value1.value) {
    //     // 如果只选择了课程，则仅按课程筛选
    //     return tasks.value.filter((item) => item.task === value1.value);
    //   } else if (value2.value) {
    //     // 如果只选择了班级，则仅按班级筛选
    //     return tasks.value.filter((item) => item.class === value2.value);
    //   } else {
    //     // 没有选择任何课程或班级时，返回所有任务
    //     return tasks.value;
    //   }
    // });

    return {
      searchQuery,
      value1,
      value2,
      option1,
      tasks,
      filterTasks,
      formatDate,
      handleVisitLink,
      filterTasksBySearch,
    };
  },
};
</script>

<style scoped>
.home-link {
  margin-right: 1.5vw;
  text-decoration: none;
  color: #333;
}

.codelover {
  padding: 2vw;
  background: #f9f9f9;
  border-radius: 1vh;
  box-shadow: 0 0.2vw 1.2vw rgba(0, 0, 0, 0.1);
}

.van-nav-bar__title {
  text-align: center;
  font-weight: bold;
  color: #333;
  font-size: 1.2em;
}

.search-wrapper {
  margin-bottom: 2vw;
}

.van-search {
  padding: 0.75vw; 
  border-radius: 1vw; 
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5vw;
  padding: 1.5vw;
  background: #ffffff;
  border-radius: 1vh;
  box-shadow: 0 0.2vw 1.2vw rgba(0, 0, 0, 0.1);
}

.task-name {
  font-size: 1.2em; 
  font-weight: bold;
  margin-right: 1vw; 
}

.task-date {
  font-size: 1em; 
  color: #666;
}

.task-status {
  font-size: 1em;
}

.task-weight {
  font-size: 1em; 
  color: #333;
  text-align: right; 
}

.van-dropdown-menu__title .van-cell {
  padding: 1.5vw;
  background: #ffffff;
  border-radius: 1vh;
  box-shadow: 0 0.2vw 1.2vw rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .home-link {
    margin-right: 1vw;
    font-size: 1vw;
  }

  .task-name,
  .task-date,
  .task-status,
  .task-weight {
    font-size: 1.5vw;
  }
}

</style>